<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label">登录账号</label>
                <div class="layui-input-block">
                    <input type="text" id="loginName"  class="layui-input" readonly disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-block">
                    <input type="text" id="phone" name="phone" lay-verify="required|phone" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" id="email" name="email" lay-verify="required|email" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea id="comment" name="comment" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">本人照片</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="uploadImg">上传照片</button>
                </div>
            </div>
            <div class="layui-form-item" style="width: 200px;position:relative;right: -150px">
                <div class="layui-upload-list">
                    <img  class="layui-upload-img" id="headImg">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="saveBtn">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    let user;
    $(function () {
        user = sessionStorage.getItem("user");   // 字符串
        user = JSON.parse(user);                  // 把一个json字符串转换成一个真正的json对象
        $.ajax({
            url:'/staff/selectById',
            method:'get',
            data:{id:user.staffId},
            success : function(response) {
                $("#loginName").val(response.data.loginName);
                $("#phone").val(response.data.phone);
                $("#email").val(response.data.email);
                $("#comment").val(response.data.comment);
                $("#headImg").attr('src',response.data.headImg);
            },
            error : function(response) {
                layer.msg(response.msg)
            }
        })
    })
</script>
<script>
    layui.use(['element','layer','form','upload','miniTab'], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            upload = layui.upload,
            miniTab = layui.miniTab;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(JSON.stringify(data.field));
            data.field.staffId = user.staffId;
            $.ajax({
                url:'/staff/updateById',
                method:'post',
                contentType:"application/json;charset=utf-8",
                datatype:"text",
                data:JSON.stringify(
                    /*phone:$("#phone").val(),
                    email:$("#email").val(),
                    staffId:user.staffId*/
                    data.field
                ),
                success : function(response) {
                    layer.msg(response.msg)
                    setTimeout(function (){
                        miniTab.deleteCurrentByIframe();
                    }, 800);
                },
                error : function(response) {
                    layer.msg(response.msg)
                }
            })
            return false;
        });

        var uploadInst = upload.render({
            elem: '#uploadImg'
            ,url: '/staff/uploadHeadImg' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code !== 200){
                    return layer.msg(res.msg);  // 上传失败提示信息
                }
                // 下面的操作是上传成功的时候，需要更新到头像地址内容
                user = sessionStorage.getItem("user");   // 字符串
                console.log(user);
                console.log(JSON.parse(user));
                user = JSON.parse(user);                  // 把一个json字符串转换成一个真正的json对象
                user.headImg = res.data;                  // 保存用户的更新的头像地址
                console.log("newImg:  "+user.headImg);
                $("#headImg").attr("src", user.headImg);
                sessionStorage.setItem("user", JSON.stringify(user));   // 必须存放一次localStorage，方便其余页面也能获取最新的头像信息

                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</body>
</html>